﻿@{
    ViewData["Title"] = "盘点单详情";
}

<div id="app" class="inventory-detail">
    <!-- 加载状态 -->
    <div class="loading-mask" id="loadingMask">
        <div class="loading-content">加载中...</div>
    </div>

    <!-- 错误提示 -->
    <div class="alert alert-error" id="errorAlert" style="display: none;">
        <span class="alert-message" id="errorMessage"></span>
        <button class="alert-close" onclick="document.getElementById('errorAlert').style.display='none'">×</button>
    </div>

    <!-- 主内容区 -->
    <div class="card" id="inventoryCard" style="display: none;">
        <!-- 头部：单号 + 打印按钮 -->
        <div class="header-container">
            <div class="row">
                <div class="col-18">
                    <h2>盘点单详情</h2>
                    <div class="order-no">
                        <span class="label">盘点单号：</span>
                        <span class="value" id="inventoryOrderNo"></span>
                    </div>
                </div>
                <div class="col-6 text-right">
                    <button class="btn btn-primary" id="printBtn">
                        <i class="icon-printer"></i> 打印
                    </button>
                </div>
            </div>
        </div>

        <!-- 基础信息区域 -->
        <div class="base-info">
            <div class="row info-row">
                <div class="col-6">
                    <div class="description">
                        <div class="description-label">制单人</div>
                        <div class="description-value" id="createBy"></div>
                    </div>
                </div>
                <div class="col-6">
                    <div class="description">
                        <div class="description-label">所在部门</div>
                        <div class="description-value" id="departmentName"></div>
                    </div>
                </div>
                <div class="col-6">
                    <div class="description">
                        <div class="description-label">制单时间</div>
                        <div class="description-value" id="createTime"></div>
                    </div>
                </div>
                <div class="col-6">
                    <div class="description">
                        <div class="description-label">盘点状态</div>
                        <div class="description-value">
                            <span class="tag" id="reviewStatusTag"></span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row info-row">
                <div class="col-6">
                    <div class="description">
                        <div class="description-label">盘点类型</div>
                        <div class="description-value" id="inventoryTypes"></div>
                    </div>
                </div>
                <div class="col-6">
                    <div class="description">
                        <div class="description-label">开始时间</div>
                        <div class="description-value" id="inventoryStartTime"></div>
                    </div>
                </div>
                <div class="col-6">
                    <div class="description">
                        <div class="description-label">结束时间</div>
                        <div class="description-value" id="stktEndTime"></div>
                    </div>
                </div>
                <div class="col-6">
                    <div class="description">
                        <div class="description-label">仓库名称</div>
                        <div class="description-value" id="warehouseName"></div>
                    </div>
                </div>
            </div>

            <div class="row info-row">
                <div class="col-6">
                    <div class="description">
                        <div class="description-label">经办人</div>
                        <div class="description-value" id="handlerName"></div>
                    </div>
                </div>
                <div class="col-18">
                    <div class="description">
                        <div class="description-label">备注</div>
                        <div class="description-value" id="note"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 盈亏统计区域 -->
        <div class="summary-stats">
            <div class="divider">盈亏统计</div>
            <div class="row stats-row">
                <div class="col-6">
                    <div class="statistic">
                        <div class="statistic-title">总盘盈数量</div>
                        <div class="statistic-value profit" id="totalProfitNum"></div>
                    </div>
                </div>
                <div class="col-6">
                    <div class="statistic">
                        <div class="statistic-title">总盘亏数量</div>
                        <div class="statistic-value loss" id="totalLossNum"></div>
                    </div>
                </div>
                <div class="col-6">
                    <div class="statistic">
                        <div class="statistic-title">总盘盈金额</div>
                        <div class="statistic-value profit" id="totalProfitAmount"></div>
                    </div>
                </div>
                <div class="col-6">
                    <div class="statistic">
                        <div class="statistic-title">总盘亏金额</div>
                        <div class="statistic-value loss" id="totalLossAmount"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 返回按钮 -->
        <div class="footer-actions">
            <button class="btn btn-default" id="backBtn">返回列表</button>
        </div>
    </div>
</div>

<script>
    // 全局变量
    let inventoryData = null;
    const id = getQueryParam('id');

    // 页面加载完成后执行
    document.addEventListener('DOMContentLoaded', function() {
        if (!id) {
            showError('未指定盘点单ID');
            hideLoading();
            return;
        }
        loadInventoryDetail();

        // 绑定事件
        document.getElementById('printBtn').addEventListener('click', handlePrint);
        document.getElementById('backBtn').addEventListener('click', handleBack);
    });

    // 加载盘点单详情
    function loadInventoryDetail() {
        axios.get(`/InventoryCheck/GetInventoryById?id=${id}`)
            .then(res => {
                 console.log("接口返回数据：", res.data.data); // 打印完整数据
                if (res.data.success && res.data.data) {
                    inventoryData = res.data.data;
                    renderPage(); // 渲染页面数据
                    document.getElementById('inventoryCard').style.display = 'block';
                } else {
                    showError(res.data.message || '获取盘点单详情失败');
                }
            })
            .catch(err => {
                console.error('加载失败:', err);
                showError('网络错误，无法加载数据');
            })
            .finally(() => {
                hideLoading();
            });
    }

    // 渲染页面数据
    function renderPage() {
        if (!inventoryData) return;

        // 基础信息
        document.getElementById('inventoryOrderNo').textContent = inventoryData.inventory_order_no || '-';
        document.getElementById('createBy').textContent = inventoryData.create_by || '-';
        document.getElementById('departmentName').textContent = inventoryData.department_name || '-';
        document.getElementById('createTime').textContent = formatDate(inventoryData.create_time) || '-';
        document.getElementById('inventoryTypes').textContent = inventoryData.inventory_types || '-';
        document.getElementById('inventoryStartTime').textContent = formatDate(inventoryData.inventory_start_time) || '-';
        document.getElementById('stktEndTime').textContent = formatDate(inventoryData.stkt_end_time) || '-';
        document.getElementById('warehouseName').textContent = inventoryData.warehouse_name || '-';
        document.getElementById('handlerName').textContent = inventoryData.handler_name || '-';
        document.getElementById('note').textContent = inventoryData.note || '-';

        // 状态标签
        const statusTag = document.getElementById('reviewStatusTag');
        const statusText = getStatusText(inventoryData.review_status);
        const statusType = getStatusType(inventoryData.review_status);
        statusTag.textContent = statusText;
        statusTag.className = `tag tag-${statusType}`;

        // 盈亏统计
        document.getElementById('totalProfitNum').textContent = inventoryData.total_profit_num || 0;
        document.getElementById('totalLossNum').textContent = inventoryData.total_loss_num || 0;
        document.getElementById('totalProfitAmount').textContent = formatMoney(inventoryData.total_profit_amount || 0);
        document.getElementById('totalLossAmount').textContent = formatMoney(inventoryData.total_loss_amount || 0);
    }

    // 格式化日期
    function formatDate(dateStr) {
        if (!dateStr) return '';
        try {
            const date = new Date(dateStr);
            return date.toLocaleString('zh-CN', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit'
            });
        } catch (e) {
            return dateStr;
        }
    }

    // 格式化金额
    function formatMoney(amount) {
        return amount.toFixed(2) + ' 元';
    }

    // 状态文本转换
    function getStatusText(status) {
        const map = { 0: '草稿', 1: '待审核', 2: '有盈亏', 3: '无盈亏', 4: '已作废' };
        return map[status] || '未知状态';
    }

    // 状态标签类型
    function getStatusType(status) {
        // 对应不同的样式类
        const map = { 0: 'info', 1: 'warning', 2: 'success', 3: 'primary', 4: 'danger' };
        return map[status] || 'default';
    }

    // 打印功能
    function handlePrint() {
        window.print();
    }

    // 返回列表
    function handleBack() {
        window.location.href = '/InventoryCheck/Index';
    }

    // 获取URL参数
    function getQueryParam(name) {
        const url = window.location.href;
        const reg = new RegExp(`(\\?|&)${name}=([^&]*)(&|$)`);
        const result = url.match(reg);
        return result ? decodeURIComponent(result[2]) : null;
    }

    // 显示错误提示
    function showError(message) {
        const errorAlert = document.getElementById('errorAlert');
        document.getElementById('errorMessage').textContent = message;
        errorAlert.style.display = 'block';
    }

    // 隐藏加载状态
    function hideLoading() {
        document.getElementById('loadingMask').style.display = 'none';
    }
</script>

<style>
    /* 基础样式 */
    .inventory-detail {
        padding: 20px;
        background-color: #f9fafb;
        min-height: 100vh;
        box-sizing: border-box;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    }

    /* 加载状态 */
    .loading-mask {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.7);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1000;
    }

    .loading-content {
        font-size: 18px;
        color: #606266;
    }

    /* 错误提示 */
    .alert {
        padding: 12px 16px;
        border-radius: 4px;
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .alert-error {
        background-color: #fef0f0;
        border: 1px solid #fde2e2;
        color: #f56c6c;
    }

    .alert-message {
        flex: 1;
    }

    .alert-close {
        background: none;
        border: none;
        color: #f56c6c;
        font-size: 16px;
        cursor: pointer;
        padding: 0 4px;
    }

    /* 卡片样式 */
    .card {
        background-color: #fff;
        border-radius: 4px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        padding: 20px;
    }

    /* 头部样式 */
    .header-container {
        margin-bottom: 24px;
        padding-bottom: 16px;
        border-bottom: 1px solid #eee;
    }

    .order-no {
        margin-top: 8px;
        font-size: 16px;
    }

    .label {
        color: #606266;
        margin-right: 8px;
    }

    .value {
        font-weight: 600;
        color: #1f2329;
    }

    /* 栅格布局 */
    .row {
        display: flex;
        flex-wrap: wrap;
        margin: 0 -10px;
    }

    .col-6 {
        flex: 0 0 25%;
        padding: 0 10px;
        box-sizing: border-box;
    }

    .col-18 {
        flex: 0 0 75%;
        padding: 0 10px;
        box-sizing: border-box;
    }

    .text-right {
        text-align: right;
    }

    /* 基础信息区域 */
    .base-info {
        margin-bottom: 24px;
    }

    .info-row {
        margin-bottom: 16px;
    }

    .description {
        border: 1px solid #ebeef5;
        border-radius: 4px;
        padding: 10px;
    }

    .description-label {
        color: #606266;
        font-weight: 500;
        margin-bottom: 6px;
        display: inline-block;
    }

    .description-value {
        color: #303133;
    }

    /* 状态标签 */
    .tag {
        display: inline-block;
        padding: 2px 8px;
        border-radius: 4px;
        font-size: 12px;
    }

    .tag-info {
        background-color: #e8f4fd;
        color: #409eff;
    }

    .tag-warning {
        background-color: #fdf6ec;
        color: #e6a23c;
    }

    .tag-success {
        background-color: #f0f9eb;
        color: #67c23a;
    }

    .tag-primary {
        background-color: #f0f5ff;
        color: #1890ff;
    }

    .tag-danger {
        background-color: #fef0f0;
        color: #f56c6c;
    }

    /* 盈亏统计区域 */
    .summary-stats {
        margin-top: 24px;
    }

    .divider {
        font-size: 14px;
        color: #303133;
        padding: 8px 0;
        border-bottom: 1px solid #ebeef5;
        margin-bottom: 16px;
    }

    .stats-row {
        margin-top: 16px;
    }

    .statistic {
        text-align: center;
        padding: 16px;
        background-color: #f9fafb;
        border-radius: 4px;
    }

    .statistic-title {
        color: #606266;
        font-size: 14px;
        margin-bottom: 8px;
    }

    .statistic-value {
        font-size: 20px;
        font-weight: 600;
    }

    .profit {
        color: #67c23a;
    }

    .loss {
        color: #f56c6c;
    }

    /* 按钮样式 */
    .btn {
        padding: 8px 16px;
        border-radius: 4px;
        border: none;
        font-size: 14px;
        cursor: pointer;
    }

    .btn-primary {
        background-color: #409eff;
        color: #fff;
    }

        .btn-primary:hover {
            background-color: #66b1ff;
        }

    .btn-default {
        background-color: #f5f7fa;
        color: #606266;
        border: 1px solid #dcdfe6;
    }

        .btn-default:hover {
            background-color: #e9e9eb;
        }

    /* 图标样式 */
    .icon-printer::before {
        content: "🖨️";
        margin-right: 4px;
    }

    /* 底部按钮区域 */
    .footer-actions {
        margin-top: 32px;
        text-align: right;
    }
</style>